<template>
	<view class="app-container">
		<!-- 帖子内容 -->
		<view class="post app-box" v-for="item in postList" :key="item.id" @click="toPostPage(item.id)">
			<view class="author">
				<image :src="item.userVO.avatarUrl" class="app-avatar"></image>
				<view class="nickname">{{ item.userVO.nickname }}</view>
				<u-tag :text="'Lv.' + item.userVO.level" size="mini" :borderColor="themeColor" :bgColor="themeColor" color="#fff"></u-tag>
			</view>
			<view class="detail">
				<view class="app-title">{{ item.title }}</view>
				<view class="app-content content">{{ item.content }}</view>
				<image v-if="item.images && item.images.length > 0" :src="item.images[0].url" mode="aspectFill"></image>
				<view class="detail-info">
					<view style="margin-right: auto">{{ item.time }} · {{ item.area }}</view>
					<view class="icon"><u-icon name="thumb-up-fill" :label="item.likes" :color="item.liked ? themeColor : '#999'"></u-icon></view>
					<view class="icon"><u-icon name="star-fill" :label="item.collect" :color="item.collected ? themeColor : '#999'"></u-icon></view>
					<view class="icon"><u-icon name="chat-fill" :label="item.comments" color="#999"></u-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/http.js';
import { timeCalc } from '@/api/utils.js';

export default {
	data() {
		return {
			postList: []
		};
	},
	onShow() {
		this.getPostList();
	},
	methods: {
		async getPostList() {
			let userId = uni.getStorageSync('userId');
			let res = await request('/forum/getAllCollect', { userId });
			if (res.data) {
				let postList = res.data;

				postList.forEach((item) => {
					item.time = timeCalc(item.createTime);
				});

				// 将获取到的帖子列表赋值给postList
				this.postList = postList;
			}
		},
		toPostPage(id) {
			uni.navigateTo({
				url: `/pages/Forum/PostPage?id=${id}`
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #fcfcfc;
}

.post {
	.author {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.nickname {
			margin-right: 20rpx;
		}
	}

	.detail {
		.content {
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
		}

		image {
			border-radius: 30rpx;
			width: 100%;
		}

		&-info {
			display: flex;
			justify-content: flex-end;
			color: #999;
			margin-top: 10rpx;
			padding-top: 10rpx;
			border-top: 1px gainsboro solid;
			font-size: $font-size-small;

			.icon {
				margin-right: 20rpx;
			}
		}
	}
}
</style>
